<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>v-for 遍历数组</title>
</head>
<body>
<div id="app">
    <ul>
        <li>{{ arr[0] }}</li>
        <li>{{ arr[1] }}</li>
        <li>{{ arr[2] }}</li>
        <li>{{ arr[3] }}</li>
        <li>{{ arr[4] }}</li>
    </ul>


    <hr>

    <!--使用循环一定要保证格式不变-->
    <ul>
        <!--将重复的部分使用 循环 进行处理-->
        <!--item 是自定义标识符，-->
        <li v-for="item in arr">{{ item }}</li>
    </ul>

    <hr>
    <ul>
        <!--在遍历的过程中，内容在前面，最后一个为索引-->
        <li v-for="(item,index) in arr">{{index}}.{{ item }}</li>
    </ul>

</div>

<script type="module">
    import {createApp, reactive} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let arr = reactive(["张三", "李四", "王五", "赵六", "孙七"])
                return {
                    arr,
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>